CSS Zen Garden è un'iniziativa interessante lanciata nel 2003 per dimostrare i benefici relativi all'utilizzo dei CSS, Cascading Style Sheets.

Usando lo stesso codice HTML e lo stesso contenuto,molti web designer hanno costruito molti file CSS producendo tantissime pagine web differenti.

CSS Zen Garden è un sito creato nel 2003 da Dave Shea.

Mezzo manifesto e mezza galleria,CSS Zen Garden è apparso come una reazione ad un uso abituale, elementare e poco ispirato dei CSS Cascading Style Sheets.

L'idea di base era quella di creare un codice HTML fisso ed elementare e chiedere ai designer, ai programmatori, ed ai creativi di contribuire con differenti file CSS al format visuale.

L'HTML è un codice di descrizione di pagina, il supporto logico di ciascuna pagina web.
E' stato creato per fornire le pagine Web di una struttura logica, non di un formato visuale.

Negli anni 90, la proliferazione dei siti Web e dei browser, ognuno con le sue proprietà personali ed i propri modi di interpretare l'HTML, hanno creato un certo caos.
Quello che in un browser si vedeva benissimo in un altro non era possibile ( ancora oggi ci sono dei problemi ).

Un'organizzazione di Web Designer chiamata "The Web Standards Project" ha iniziato a lavorare con i produttori di software per allineare i loro software( che mostrano differenze importanti per la stessa pagina HTML) seguendo le raccomandazioni del "World Wide Web Consortium" o W3C.

Alcune informazioni sui CSS
Uno dei fondamenti della programmazione delle interfacce grafiche è sempre stato separare i contenuti dalla forma, il modo in cui venivano presentati.

Questo significa che l'intero codice che fa funzionare il programma non dovrebbe contenere elementi grafici, ma solamente riferimenti alla struttura.

Per esempio nel codice HTML:

Questa è una citazione

"blockquote" fa riferimento ad un blocco di testo che corrisponde ad una citazione di un altro testo.

In altre parole è un modo di strutturare le frasi di un documento, ma non specifica il font e la grandezza di una lettera e quale colore deve mostrare.

Abbastanza singolare, dal momento che molti browser indentano questo tipo di paragrafo, e perciò

viene usato regolarmente per produrre un effetto visuale di indentazione, invece di essere usato per il suo scopo originale.

Se non rispettiamo i principi di programmazione, ogni volta che cambiamo opinione, dovremmo cercare tutte le pagine che contengono quel codice e questo può diventare un incubo.

Inoltre questo limita fortemente la flessibilità del design.

Il risultato del lavoro fatto dai gruppi menzionati precedentemente, fornisce molti standard HTML e in particolare le specifiche dei CSS.

Aggiungendo alcuni identificatori nei tag HTML come, per esempio "class" e "id" è possibile definire che un tag HTML appartiene ad una determinata classe creata dall'utente.

Questo significa che

In a place in La Mancha...

indica strutturalmente parlando quelle paole tra "blockquotes" in una citazione letteraria.

In un file differente sarai tu a definire la formattazione visuale di una specifica classe ed in questo modo separerai la forma dal contenuto.

Basterà cambiare solo la formattazione visuale della classe per modificare le caratteristiche grafiche di tutte le citazioni.

Ancora da Zen Garden
I CSS all'inizio sono stati usati per scopi di programmazione, non di grafica, e tutti gli sforzi fatti per mostrare la loro potenza ai grafici, sono serviti a poco.

E Dave Shea ha pensato: se fosse esistito un posto dove trovare eccezionali lavori grafici basati sui CSS, i designere avrebbero potuto realizzare l'effettiva potenza dei CSS.

Con questo scopo ha creato CSS Zen Garden nel 2003. CSS Zen Garden consiste solo di una pagina con poco codice che invita ciascuno a contribuire al progetto con propri file CSS.

Ci sono più di 700 contributi.

Ogni pagina Web ha lo stesso contenuto ed un differente stile CSS.

Guardando direttamente il codice utilizzato potrai imparare molto sull'utilizzo dei CSS, su come distribuire gli elementi di una pagina, su come utilizzare i caratteri giusti, su come creare degli effetti speciali utilizzando i CSS avanzati.

*****************
Tratto da un articolo originale:
"Cascading Style Sheets Zen Garden"
pubblicato da Juan C. Dürsteler
© J.C. Dürsteler 2000 - 2005 Barcelona, Spain

Scritto qui nuovamente con il permesso.

http://www.infovis.net

Iscriviti alla newsletter InfoVis gratuitamente.